<template>
	<div class="screen_wrap echarts_box" style="padding: 1px;" v-loading="loading">
		<corner></corner>
		
		<baidu-map ref="map" class="map" :center="center"  :zoom="zoom" @zoomend="zoomEnd" :scroll-wheel-zoom="true" :map-click="false" 
			@moveend="moveEnd"  @ready="handler">	        
			<bml-marker-clusterer :averageCenter="true">
				<div v-for="(marker,index) in markers">
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==22&&marker.isAbnormal==0"
						:icon="{ url: '/img/bigScreen/58.png',size: {width:45, height: 45}}">
					</bm-marker>
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==22&&marker.isAbnormal==1"
						:icon="{ url: '/img/bigScreen/57.png',size: {width:45, height: 45}}">
					</bm-marker>
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==99&&marker.isAbnormal==0"
						:icon="{ url: '/img/bigScreen/54.png',size: {width:45, height: 45}}">
					</bm-marker>
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==99&&marker.isAbnormal==1"
						:icon="{ url: '/img/bigScreen/61.png',size: {width:45, height: 45}}">
					</bm-marker>	
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==39&&marker.isAbnormal==0"
						:icon="{ url: '/img/bigScreen/63.png',size: {width:45, height: 45}}">
					</bm-marker>
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==39&&marker.isAbnormal==1"
						:icon="{ url: '/img/bigScreen/64.png',size: {width:45, height: 45}}">
					</bm-marker>
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==31&&marker.isAbnormal==0"
						:icon="{ url: '/img/bigScreen/56.png',size: {width:45, height: 45}}">
					</bm-marker>
					<bm-marker  
						@mouseover="pointClick(marker)"
						@mouseleave="pointLeave"
						:position="{lng: marker.lng, lat: marker.lat}" 
						v-if="marker.type==31&&marker.isAbnormal==1"
						:icon="{ url: '/img/bigScreen/55.png',size: {width:45, height: 45}}">
					</bm-marker>					
				</div>
			</bml-marker-clusterer>
			
		    <my-overlay
		      v-if="showInfo"	
		      :position="position"
		      :dataInfo="currentData"
		      :active="active"
		      @close="showInfo=false"
		      @mouseover.native="active = true"
		      @mouseleave.native="active = false">
		    </my-overlay>			
		</baidu-map>
	</div>
</template>

<script>
	import { getAirGisData,getOtherAirGisData } from "@/api/bigScreen/bigScreen";
	import { BmlMarkerClusterer } from 'vue-baidu-map'
	import { mapStyle,mapStyle3} from "@/components/common/option/system.js";
	import corner from '../public/corner' 
	import MyOverlay from '../mapComponents/overlay2'
	export default {
		components: {
			BmlMarkerClusterer,
			MyOverlay,
			corner
		},
		data() {
			return {
				loading:true,
				center: '',
                mapStyle:mapStyle,
				markers: [],
				zoom:1,
				active: false,
				showInfo:false,
				currentData:null,
				position : null
			};
		},

		mounted() {

		},
		methods: {
			pointLeave(){
				
			},
			pointClick(market){
				let obj={lng: market.lng,lat: market.lat}
				this.showInfo=true
				this.position=obj
				this.currentData=market
			},
			handler({BMap, map}) {
				    map.setMapStyle(mapStyle)
				    // 插入 10 个随机点
				    const markers = []		
					    
				    var p1 = new Promise((resolve, reject) => {
                         getAirGisData().then(res=>{
                         	 resolve(res.data.data)
                         }).catch(err=>{
                           reject(err)
                         })
				    });	
				    var p2 = new Promise((resolve, reject) => {
                         getOtherAirGisData().then(res=>{
                         	 resolve(res.data.data)
                         }).catch(err=>{
                           reject(err)
                         })
				    });					    
				    Promise.all([p1,p2]).then(res=>{    
				          let newArr=res[0].concat(res[1])
				          newArr.forEach(item=>{
				          	let isAbnormal=0
				    		for(var i=0;i<item.factorList.length;i++){
				    			if(item.factorList[i].isAbnormal>0){
				    				isAbnormal=1;
				    				break;
				    			}
				    		}				          	
							let position = {
								lng: item.logitude,
								lat: item.latitude,
								type:item.deptType,
								isAbnormal:isAbnormal,
								dataInfo:item
							}	
							this.markers.push(position)
							// 必须设置下 否则聚合初始化不显示 
							this.center="无锡"
							this.zoom=9							
				          })
				          this.loading=false
				    })				    			    
			},		
			zoomEnd({
				target
			}) {
				this.zoom = target.getZoom()
			},
			moveEnd({
				target
			}) {
				this.center = target.getCenter()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		height: 100%;
	}
</style>